<template>
	<view class="app column">
		<view class="icon-txt">
			<view class="icon-image" v-if="img">
				<image class="icon" :src="'https://maxh-1305457127.cos.ap-guangzhou.myqcloud.com/'+img" mode="aspectFill"></image>
			</view>
			<view class="icon-image" v-else>
				<image class="icon" :src="'/static/icon/default-avatar.png'" mode="aspectFill"></image>
			</view>
			<view class="tit">
				<view class="title">
					{{ username }}
				</view>
				<view class="title">
					{{ title }}
				</view>
			</view>
		</view>
		<view class="degree">
			<view class="degree-span">
				<view class="span"></view>
				<view class="span-text">
					学历
				</view>
			</view>
			<view class="degree-text">{{degree}}</view>	
		</view>
		<view class="degree">
			<view class="degree-span">
				<view class="span"></view>
				<view class="span-text">
					邮箱
				</view>
			</view>
			<view class="degree-text">{{email}}</view>	
		</view>
		<view class="degree">
			<view class="degree-span">
				<view class="span"></view>
				<view class="span-text">
					个人描述
				</view>
			</view>
			<view class="degree-text" v-html="detail">{{detail}}</view>	
		</view>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue'
	import { getTeacherDetail} from '../../common/js/api.js';
	export default {
		components: {
			jyfParser
		},
		data() {
			return {
					img:'',
					detail:'',
					title:'',
					username:'',
					degree:'',
					email:''
			}
		},
		async onLoad(options) {
			const id = options.id;
			this.loadData(id);
		},
		methods: {
			async loadData(id){
				const res = await getTeacherDetail(id);
				const { code,data} = res;
				if(code === 200){
					this.img = data.img;
					this.detail=data.detail;
					this.title = data.title;
					this.username=data.username;
					this.degree = data.degree;
					this.email = data.email;
				}		
			}
		}
	}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.app{
		padding: 10rpx 30rpx 30rpx;
	}
	.img{
		margin: 0 10rpx 30rpx 10rpx;
	}
	.cate-text{
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
		border-radius: 8rpx;
	}
	.icon-txt{
		width: calc(100% - 10rpx);
		height:215rpx;
		margin: 10rpx;
		padding: 10rpx 10rpx;
		border-radius: 8rpx;
		background-color: #fff;
	}
	.icon{
		width: 170rpx;
		height: 170rpx;
		line-height: 148rpx;
		margin-top: 15rpx;
		margin-right: 40rpx;
		border-radius: 100rpx;
		overflow: hidden;
	}
	.icon-image{
		float: left;
		// background-color: #0081FF;
		border-radius: 8rpx;
		
	}
	.tit{
		margin-top: 35rpx;
	}
	.title{
		font-size: 32rpx;
		color: #000;
	}
	.type{
		font-size: 20rpx;
		color:#969696;
		float: right;
	}
	.maney{
		font-size: 28rpx;
		color:#999999;
	}
	.teacher{
		margin-bottom: 5rpx;
	}
	.teacherName{
		color: #5e5e5e;
		margin-right:15rpx;
		font-size: 30rpx;
	}
	.introduce-wrap{
		padding-bottom: 20rpx;
		
		.introduce {
			font-size: 28rpx;
			color: #606266;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		&.has-pic .introduce{
			-webkit-line-clamp: 2;
		}
	}
	.degree{
		width: calc(100% - 10rpx);
		margin: 10rpx;
		padding: 10rpx 10rpx;
		border-radius: 8rpx;
		background-color: #fff;
		.degree-span{
			border-bottom: solid  #808080 1rpx;
		}
		.span{
			width: 10rpx;
			height: 40rpx;
			background-color: #07C160;
			float: left;
			margin-right: 20rpx;
		}
		.span-text{
			color: #5e5e5e;
		}
		.degree-text{
			margin-left: 10rpx;
			margin-top: 10rpx;
			font-size: 32rpx;
		}
	}
</style>
